import UserController from '@/services/user';
import { IUser } from '@/types/user';
import { PlusOutlined } from '@ant-design/icons';
import { Button, Form, Image, Input, Upload } from 'antd';
import React, { useEffect } from 'react';

interface IProps {
  type: 'add' | 'edit';
  userInfo?: IUser;
  handleSubmit: (value: any) => void;
}

const UserForm: React.FC<IProps> = ({
  type,
  userInfo,
  handleSubmit,
}: IProps) => {
  const [form] = Form.useForm();

  async function checkLoginId(_: any, value: string) {
    if (value && type === 'add') {
      const { data } = await UserController.userIsExist(value);
      // console.log(data, 'data');
      if (data) {
        // 说明该 loginId 已经注册过了
        return Promise.reject('该账号已经注册过了');
      }
    }
  }

  // 数据回填
  useEffect(() => {
    form.resetFields();
    form.setFieldsValue(userInfo);
  }, [userInfo?._id]);

  // 头像的容器
  let avatarPreview = null;
  if (type === 'edit') {
    avatarPreview = (
      <Form.Item label="当前头像" name="avatarPreview">
        <Image src={userInfo?.avatar} width={100} />
      </Form.Item>
    );
  }
  return (
    <Form
      name="basic"
      form={form}
      initialValues={{ ...userInfo }}
      autoComplete="off"
      onFinish={handleSubmit}
    >
      {/* 登录账号 */}
      <Form.Item
        label="登录账号"
        name="loginId"
        rules={[
          { required: true, message: '请输入登录账号' },
          { validator: checkLoginId },
        ]}
        validateTrigger="onBlur"
      >
        <Input
          placeholder="账号为必填项"
          disabled={type === 'edit' ? true : false}
        />
      </Form.Item>

      {/* 登录密码 */}
      <Form.Item
        label="登录密码"
        name="loginPwd"
        rules={[
          type === 'edit' ? { required: true, message: '密码不能为空' } : {},
        ]}
      >
        <Input.Password placeholder="密码可选，默认密码为123456" />
      </Form.Item>

      {/* 用户昵称 */}
      <Form.Item
        label="用户昵称"
        name="nickname"
        rules={[
          type === 'edit' ? { required: true, message: '昵称不能为空' } : {},
        ]}
      >
        <Input placeholder="昵称可选，默认为新用户" />
      </Form.Item>

      {/* 当前头像，如果是编辑用户的时候才会显示，如果是新增用户则不会显示 */}
      {avatarPreview}

      {/* 用户头像 */}
      <Form.Item label="用户头像" name="avatar">
        <Upload
          action="/api/upload"
          listType="picture-card"
          maxCount={1}
          // onChange={(e) => {
          //   if (e.file.status === 'done') {
          //     // 说明上传已经完成
          //     const url = e.file.response.data;
          //     updateInfo(url, 'avatar');
          //   }
          // }}
        >
          <div>
            <PlusOutlined />
            <div
              style={{
                marginTop: 8,
              }}
            >
              头像可选
            </div>
          </div>
        </Upload>
      </Form.Item>

      {/* 用户邮箱 */}
      <Form.Item label="用户邮箱" name="mail">
        <Input placeholder="选填" />
      </Form.Item>

      {/* 用户qq */}
      <Form.Item label="QQ号码" name="qq">
        <Input placeholder="选填" />
      </Form.Item>

      {/* 用户微信 */}
      <Form.Item label="微信号" name="wechat">
        <Input placeholder="选填" />
      </Form.Item>

      {/* 自我介绍 */}
      <Form.Item label="自我介绍" name="intro">
        <Input.TextArea rows={6} placeholder="选填" />
      </Form.Item>

      {/* 确认修改按钮 */}
      <Form.Item wrapperCol={{ offset: 5, span: 16 }}>
        <Button type="primary" htmlType="submit">
          {type === 'add' ? '确认新增' : '保存'}
        </Button>
        <Button type="link" htmlType="reset" className="resetBtn">
          重置
        </Button>
      </Form.Item>
    </Form>
  );
};

export default UserForm;
